<template>
	<view class="ac">
		<view class="list" v-for="(item,index) in goodsList" :key="index">
			<view class="list-item">
				<view class="left">
					<image class="img" :src="item.images[0]">
				</view>
				<view class="right">
					<view class="title">{{item.shortitle}}</view>
					<view class="mall-title">{{item.title}}</view>
					<view class="short-bg">
						<view class="short-bg-num">库存剩余：{{item.sku}}件</view>
					</view>
					<view class="mall-mian">¥{{item.price}}</view>
					<view class="jifen">
						<view class="pirce">
							<view class="now">{{item.intergral}}
								<text style="font-size: 12px;font-weight: normal;">（积分）</text>
							</view>
						</view>
						<view class="mall-but" @click="hanldOrderInfo(item.id)">立即兑换</view>
					</view>
				</view>
			</view>
		</view>

		<view v-if="loadAll&&goodsList.length>=10" class="no-more-data">没有更多了</view>
		<view v-if="goodsList.length == 0" class="no-more-data">
			暂无数据
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				goodsList: [],
				loadAll: false,
				page: 1,
				cate: ''
			}
		},
		onPullDownRefresh() {
			// console.log('下拉刷新')
			this.loadAll = false;
			this.goodsList = [];
			this.page = 1;
			this.getCateGoods();
		},
		onReachBottom() {
			console.log('上拉加载')
			if (!this.loadAll) {
				this.getCateGoods();
			}
		},
		onShow() {
			this.getCateGoods()
		},
		onLoad(options) {
			if (options.catid) {
				this.cate = options.catid
			}
			if (options.name) {
				uni.setNavigationBarTitle({
					title: options.name
				})
			} else {
				uni.setNavigationBarTitle({
					title: '促销活动'
				})
			}
		},
		methods: {
			hanldOrderInfo(id) {
				uni.navigateTo({
					url: '/pages/mall/mallShopInfo?id=' + id
				})
			},
			getCateGoods() {
				this.$http.categoods({
					cate: this.cate,
					page: this.page
				}).then(res => {
					console.log(res)
					let _list = res.data.data
					let totalPage = res.data.last_page
					if (this.page > totalPage || _list.length == 0) {
						this.loadAll = true
						return
					}
					if (_list.length > 0) {
						this.goodsList = this.goodsList.concat(_list);
					}
					this.page++;
				})
			},
		}
	}
</script>

<style scoped>
	.ac {
		width: 100%;
		background-color: rgba(246, 246, 246, 1);
		padding: 10px 0;
	}

	/* list */
	.list {
		display: flex;
		flex-direction: column;

	}

	.list-item {
		padding: 17px 15px;
		background-color: #FFFFFF;
		margin-bottom: 10px;
		display: flex;
		color: #333;
		position: relative;
		background-color: #FFFFFF;
	}

	.list-item .img {
		width: 110px;
		height: 110px;
		margin-right: 10px;
		border-radius: 5px;
	}

	.list-item .right {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		width: 70%;
	}

	.list-item .title {
		font-size: 15px;
		color: rgba(0, 0, 0, 1);
		font-weight: bold;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.list-item .short-title {
		height: 32upx;
		background: #3E9AFC;
		border-radius: 16upx;
		color: #FFFFFF;
		text-align: center;
		padding: 0 15px;
	}

	.mall-title {
		color: rgba(134, 134, 134, 1);
	}

	.list-item .pirce {
		line-height: 30px;
		display: flex;
	}

	.list-item .pirce .now {
		display: flex;
		font-size: 18px;
		color: #3E9AFC;
		font-weight: bold;
		margin-right: 6px;
	}

	/* .list-item .pirce .now .word{ font-size: 12px; } */
	.list-item .pirce .delet {
		color: #666;
		text-decoration: line-through;
	}

	.mall-mian {
		color: rgba(174, 174, 174, 1);
		text-decoration: line-through;
	}

	.list-item .mall-but {
		width: 160upx;
		height: 60upx;

		background: linear-gradient(124deg, #6AA7E8 0%, #3D9AFD 100%);
box-shadow: none;
		border-radius: 10upx;

		color: #fff;
		font-size: 14px;
		font-weight: bold;
		text-align: center;
		line-height: 60upx;
	}

	.jifen {
		display: flex;
		flex-direction: revert;
		align-items: center;
		justify-content: space-between;
	}

	.short-bg {
		position: relative;
		border-radius: 8px;
		background-color: rgba(239, 244, 254, 1);
		height: 16px;
		width: 260upx;
	}

	.short-bg-num {
		position: absolute;
		width: 260upx;
		text-align: center;
		color: #FFFFFF;
		font-size: 12px;
		background-color: #3E9AFC;
		border-radius: 8px;

	}
</style>
